<template>
  <div>
    <mt-header  title="奖项选择"></mt-header>
    <div class="jx_push">     <!--根据数组arr长度控制div动态生成-->
        <div class="jx_body" v-for="(item, index) in arr" :key="index">
            <p class="jx_p">{{ jx_arr[index] }}</p>
            <div class="hr"></div>
            <ul class="input">
            <li>
                <span>奖项等级：</span>
                <input type="text" :placeholder="item.title"  :value="dj" />
            </li>
            <li>
                <span>奖项名称：</span>
                <input type="text" :placeholder="item.uname"  :value="mc" />
            </li>
            <li>
                <span>奖项数量：</span>
                <input type="text" :placeholder="item.num"  :value="sl" />
            </li>
            </ul>
      </div>
    </div>

    <ul class="button">
      <li>
        <mt-button class="btn" type="primary" size="large" @click="add"
          >添加新奖品</mt-button
        >
      </li>
      <li>
        <mt-button class="btn" type="primary" size="large">保存修改</mt-button>
      </li>
    </ul>
  </div>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.head{
    width: 100%;
    height: 10vh;
    background-color: aqua;
}
.jx_push {
  margin-top: 4vh;
}
.input {
  margin-top: 4vh;
  margin-left: 8vw;
}
.jx_p {
  font-size: 15px;
  font-weight: bold;
}
.hr {
  border-bottom: 1px solid gray;
  margin-top: 2vh;
}
.input > li > input {
  width: 55vw;
  height: 5vh;
  border-radius: 8px;
  text-indent: 2vw;
  border: 1px solid gray;
}
.input > li > span {
  margin-right: 5vw;
}
.input :nth-child(2) {
  margin: 2vh 0;
}

.button {
  margin: 4vh 8vw;
}
.button :nth-child(2) {
  margin: 3vh 0;
}
.btn {
  border-radius: 25px;
}
</style>
<script>
export default {
  data() {
    return {
      dj: "",
      mc: "",
      sl: "",
      //
      arr: [
        {
          id: 1,
          title: "一等奖",
          uname: "价值100元礼品(示例)",
          num: "1",
        }
         
      ],
      jx_arr: [
        "基本选项·奖项一",
        "基本选项·奖项二",
        "基本选项·奖项三",
        "基本选项·奖项四",
        "基本选项·奖项五",
        "基本选项·奖项六",
        "基本选项·奖项七",
        "基本选项·奖项八",
    
      ],
    };
  },
  methods: {
    add() {
        // console.log(this.$refs.one[0].value)
      this.arr.push({
        id: 2,
        title: "1",
        uname: "2",
        num:  "3",
      });
      this.dj=''
    },
  },
};
</script>